<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>aixin</title>
    <style>
      #loveShow {
        position: relative;
      }
      #loveShow > img {
        position: absolute;
      }
    </style>
    <script>
      var kaishi = 0; //1为已开始 2为未开始
      var jieshu = 0; //10为结束
      var time = {};
      var timeStart;
      var timeEnd;
      function checkLove() {
        var hasLove = 0;
        for (var i = 1; i < 11; i++) {
          if (document.getElementById("love" + i).style.display !== "none") {
            hasLove++;
          }
        }
        return hasLove;
      }

      function end() {
        timeEnd = Date.now();
        console.log(666.001, timeEnd);
        const loveNum = checkLove();
        if (loveNum > 0) {
          alert("你还未完成，还有" + loveNum + "个未被点击到！");
        } else {
          var timeTake = (timeEnd - timeStart) / 1000;
          alert("你的用时：" + timeTake + "秒");
        }
      }
    </script>
  </head>
  <body>
    <script>
      function closeLove(i) {
        const loveDom = document.getElementById("love" + i);
        loveDom.style.display = "none";
      }

      function a() {
        timeStart = Date.now();
        console.log(666.002, timeStart);

        var htmlstr = "";
          var top = Math.floor(Math.random() * 1000);
          var right = Math.floor(Math.random() * 1000);

          htmlstr += `
      <img src="1.jpg" style="top:${top}px;right:${right}px;" width="100" height="100" onclick="closeLove()" id="love" />
    `;
        }
        document.getElementById("loveShow").innerHTML = htmlstr;
        // document.write(htmlstr);
      
    </script>
    <div id="loveShow"></div>
    <button onclick="a()" id="kaishi">开始游戏</button>
    <button onclick="end()" id="jieshu">结束游戏</button>
  </body>
</html>
